<template>
	<view class="edit">
		<u-toast ref="uToast"></u-toast>
		<view class="title">
			<input type="text" v-model="artObj.title" placeholder="请输入标题" placeholder-class="placeholderClass" />
		</view>
		<!-- show-img-toolbar可以控制删除图片 -->
		<view class="content">
			<editor class="myEdit" placeholder="" show-img-size show-img-resize @ready="onEditReady" @focus="onFocus">
			</editor>
		</view>
		<view class="btnGroup">
			<u-button @click="onSubmit" type="primary" text="确定发表" :disabled="!artObj.title.length"></u-button>
		</view>
		<view class="tools" v-if="toolShow">
			<view class="item" @click="clickHead">
				<text class="icon t-icon t-icon-zitibiaoti active"></text>
			</view>
			<view class="item" @click="clickBold">
				<text class="icon t-icon t-icon-jiacu"></text>
			</view>
			<view class="item" @click="clickItalic">
				<text class="icon t-icon t-icon-wenben-xieti"></text>
			</view>
			<view class="item" @click="clickDivider">
				<text class="icon t-icon t-icon-fengexian"></text>
			</view>
			<view class="item" @click="clickImage">
				<text class="icon t-icon t-icon-tupiantianjia"></text>
			</view>
			<view class="item" @click="editOk">
				<text class="icon t-icon t-icon-duihao1"></text>
			</view>
			<u-toast ref="uToast"></u-toast>
		</view>
	</view>
	</view>
</template>

<script>
	import {
		getImgSrc, //获取富文本内的图片url地址
		getProvince, //获取省份
	} from "@/utils/tool.js"
	export default {
		data() {
			return {
				toolShow: false,
				headShow: false,
				boldShow: false,
				italicShow: false,
				artObj: {
					title: "",
					content: "",
					description: "",
					picsUrl: [], //
					province: "",
					uid: ""
				},
				msgList: {
					type: "success",
					message: "获取验证码成功"
				},
			};
		},
		onLoad() {
			getProvince().then(res => {
				this.artObj.province = res;
			})
		},
		methods: {
			fillMsg(type, msg) { //提示消息的赋值
				this.msgList.type = type;
				this.msgList.message = msg;
				this.$refs.uToast.show({
					...this.msgList
				})
			},
			//点击提交按钮
			onSubmit() {
				this.editorCtx.getContents({
					success: res => {
						console.log("富文本内容:", res);
						uni.getStorage({
							key: "userInfo",
							success: (ans) => {
								console.log("获取缓存", ans);
								this.artObj.uid = ans.data.id
							}
						});
						// console.log(res.text.length, "-----", res.html.length);
						if (res.text.length <= 1) { //html是正文内容
							this.fillMsg("error", "请认真填写内容!");
						} else {
							this.artObj.description = res.text.slice(0, 100); //提取部分内容
							this.artObj.content = res.html;
							// this.artObj.picurls = getImgSrc(res.html);//这是云开发，和本地搭建后台还有点不同
							// console.log("发布人id", this.artObj.uid);
							// this.artObj.uid = this.$e.User.id;
							console.log("点击提交的内容", this.artObj);
							uni.showLoading({
								title: "发布中..."
							})
							setTimeout(() => {
								this.addData();
							}, 1000)
						}
					}
				})
			},
			addData() {
				uni.request({
					url: this.$e.Url + "/user/uploadPost",
					data: {
						title: this.artObj.title,
						content: this.artObj.content,
						description: this.artObj.description,
						picsUrl: this.artObj.picsUrl,
						province: this.artObj.province,
						uid: this.artObj.uid
					},
					header: {
						"Content-Type": "application/json"
					},
					method: "POST",
					success: (res) => {
						console.log("请求API接口【/user/uploadPost】", res);
						if (res.statusCode == 200 && res.data) {
							this.fillMsg("success", "发布成功");
							setTimeout(() => {
								uni.navigateBack();
							}, 1500)
						} else {
							this.fillMsg("erroe", "发布失败");
						}
					}
				})
			},
			//初始化
			onEditReady() { //通过SelectorQuery节点实现富文本的定制【注意别写成onEditReady】
				uni.createSelectorQuery().in(this).select('.myEdit').fields({
					size: true,
					context: true,
				}, res => {
					console.log('SelectorQuery节点res', res);
					this.editorCtx = res.context; //上下文节点
				}).exec()
			},
			//离开焦点
			onFocus() {
				this.toolShow = true;
			},
			//添加分割线
			clickDivider() {
				this.editorCtx.insertDivider();
			},
			//添加大标题
			clickHead() {
				this.headShow = !this.headShow;
				this.editorCtx.format("header", this.headShow ? 'H2' : false);
			},
			//加粗
			clickBold() {
				this.boldShow = !this.boldShow;
				this.editorCtx.format("bold");
			},
			//倾斜
			clickItalic() {
				this.italicShow = !this.italicShow;
				this.editorCtx.format("italic");
			},
			//编辑成功
			editOk() {
				this.toolShow = false;
			},
			//添加图像
			clickImage() {
				uni.chooseImage({
					success: async res => { //写了await必须有async,写了async可以没有await
						console.log("选择图片res===", res.tempFiles);
						uni.showLoading({
							title: "上传中...",
							mask: true //全屏遮罩，防止乱点
						})
						let num = 0;
						setTimeout(() => {
							for (let item of res.tempFiles) {
								num = num + 1;
								uni.uploadFile({
									url: this.$e.Url + "/Files/upload",
									filePath: item.path, //上传的文件临时地址
									method: "POST",
									success: (res) => {
										console.log("请求第" + num +
											"次API接口【Files/upload】", res);
										let dbdata = JSON.parse(res.data);
										console.log("上传返回json", dbdata);
										this.editorCtx.insertImage({
											src: dbdata.result
										});
										this.artObj.picsUrl.push(dbdata.result);
									}
								})
								//这是循环遍历
							}
							console.log("图片对象转化前:", this.artObj.picsUrl); //这是一个对象
							console.log(typeof(this.artObj.picsUrl));
							uni.hideLoading();
							this.fillMsg("success", "上传成功");
						}, 1000);
					}
				})
			},
			clickVideo() {
				uni.chooseVideo({
					success: async res => {
						uni.showLoading({
							title: "上传中...",
							mask: true
						})
						setTimeout(() => {
							console.log("滴撒", res);
							uni.uploadFile({
								url: this.$e.Url + "/Files/upload",
								filePath: res.tempFilePath, //上传的地址
								// header: {
								// 	"Content-Type": "multipart/form-data" //这是文件请求的接口,必加
								// },
								method: "POST",
								success: (res) => {
									console.log("请求API接口【Files/upload】", res);
									let dbdata = JSON.parse(res.data);
									// console.log("上传返回json", dbdata);
									this.editorCtx.insertImage({
										src: dbdata.data
									});
								}
							})
							uni.hideLoading();
							this.fillMsg("success", "上传成功");
						}, 1000);
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-image: url("/static/userbackground.jpg");
		background-size: cover;
		background-repeat: repeat;
		background-position: center center;
	}

	//深度选择器 既不影响到别的地方，又能修改子组件在当前的样式
	/deep/.ql-blank::before {
		font-style: normal;
		color: #e0e0e0;
	}

	.edit {
		padding: 25rpx;

		.title {
			input {
				height: 120rpx;
				font-size: 46rpx;
				border-bottom: 1px solid #e4e4e4;
				margin-bottom: 30rpx;
			}

			.placeholderClass {
				color: #ace2ff;
			}
		}

		.content {
			.myEdit {
				height: calc(100vh - 800rpx); //全屏的高度减去500rpx,必须要空格才生效
				margin-bottom: 30rpx;
			}

			.placeholderClass {
				color: #ace2ff;
			}
		}

		.btnGroup {}

		.tools {
			display: flex;
			justify-content: space-around; //等间距分布【不是两端对齐】
			align-items: center;
			width: 100%;
			height: 80rpx;
			background: #fff;
			border-radius: 20rpx;
			border-top: 1rpx solid #f4f4f4;
			position: fixed;
			left: 0;
			bottom: 0;

			.icon .t-icon .t-icon-zitibiaoti {
				font-size: 56rpx;
				color: #333;

				&.active {
					color: blue;
				}
			}
		}
	}
</style>
